<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地注册</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<model></model>
</div>
<hr/>
<div id="app2">
    <model258></model258>
</div>
<script>
    let model = {
        template: "<div>" +
            "<p>{{title}}</p>" +
            "<button @click='alter'>点我</button>" +
            "</div>",
        data:function () {
            return{
                title: "本地注册抽取方法"
            }
        },
        methods: {
            alter :function () {
                alert(this.title);
            }
        }
    }
    new Vue({
        el: "#app",
        data: {

        },
        components :{
            "model":{
                template: "<div>" +
                    "<h1>{{title}}</h1>" +
                    "<button @click='alter()'>点我</button>" +
                    "</div>",
                data: function () {
                    return {
                        title:"本地注册"
                    }
                },
                methods:{
                    alter : function () {
                        alert(this.title);
                    }
                }
            }
        }
    });

    new Vue({
        el: "#app2",
        data:{},
        components: {"model258":model}
    });
</script>
</body>
</html>